<template>
  <div class="count">
    <h2>Count组件</h2>
    <!--    vue2 的v-model通信的 本质-->
    <!--    <input type="text" :value="value" @input="$emit('input',$event.target.value)">-->

    <!--    vue3 的v-model通信的 本质-->
    <input type="text" :value="modevalue" @input="$emit('update:modevalue',$event.target.value)">
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";

export default defineComponent({
  name: "Count",
});

</script>

<script lang="ts" setup>
// 接受props参数
defineProps<{
  modevalue: string;
}>()
// 接受自定义事件
defineEmits<{
  (event: 'update:modevalue'): void;
}>()
</script>

<style scoped>
.count {
  background-color: skyblue;
}
</style>